// 获取所有要播放的轮播图片
var banner_imgs = document.getElementsByClassName('banner-img');
//获取小圆点
var circles = document.getElementsByClassName('btn-circle');
//图片索引
var index = 0;
//更改小圆点的背景
circles[index].style.backgroundColor = "#757575";
//定时器的id
var interval_id;
function interval(){
	//通过周期性定时器来切换图片
	interval_id = setInterval(function(){
		if(index >= 5){
			index = 0
		}else{
			//索引增加
			index++;
		}
		//让所有的都不显示
		for (var i = 0; i < banner_imgs.length; i++) {
			banner_imgs[i].style.opacity = 0;
		}
		//设置显示当前的图片
		banner_imgs[index].style.opacity = 1;
		//还原所有的小圆点的背景
		for (var i = 0; i < circles.length; i++) {
			circles[i].style.backgroundColor = "#b0b0b0";
		}
		//更改小圆点的背景
		circles[index].style.backgroundColor = "#757575";
	},3000)
}
//执行定时任务
interval();

//获取下一张的按钮
var box_right = document.getElementsByClassName('box-right');
box_right[0].addEventListener('click',function(){
	//清除定时任务
	clearInterval(interval_id);
	//让所有的都不显示
	for (var i = 0; i < banner_imgs.length; i++) {
		banner_imgs[i].style.opacity = 0;
	}
	//判断索引，最后一张的下一张应该为第一张
	if(index >= 5){
		index = 0;
	}else{
		//下一张的索引
		index++;
	}
	banner_imgs[index].style.opacity = 1;
	//还原所有的小圆点的背景
	for (var i = 0; i < circles.length; i++) {
		circles[i].style.backgroundColor = "#b0b0b0";
	}
	//更改小圆点的背景
	circles[index].style.backgroundColor = "#757575";
	//启动定时任务
	interval();
})

//获取上一张的按钮
var box_left = document.getElementsByClassName('box-left');
box_left[0].addEventListener('click',function(){
	//清除定时任务
	clearInterval(interval_id);
	//让所有的都不显示
	for (var i = 0; i < banner_imgs.length; i++) {
		banner_imgs[i].style.opacity = 0;
	}
	//判断索引，第一张的上一张应该为最后一张
	if(index <= 0 ){
		index = 5;
	}else{
		//上一张的索引
		index--;
	}
	banner_imgs[index].style.opacity = 1;
	//还原所有的小圆点的背景
	for (var i = 0; i < circles.length; i++) {
		circles[i].style.backgroundColor = "#b0b0b0";
	}
	//更改小圆点的背景
	circles[index].style.backgroundColor = "#757575";
	//启动定时任务
	interval();
})

for (var i = 0; i < circles.length; i++) {
	circles[i].addEventListener('click',function(event){
		//获取当前被点击的元素
		var click_circle = event.target;
		//将小圆点的元素集合装为数组
		var circles_list = Array.from(circles);
		//根据元素获取对应的索引
		var click_circle_index = circles_list.indexOf(click_circle);
		//将对应的索引告诉图片
		index = click_circle_index;
		/*切换图片*/
		//清空定时任务
		clearInterval(interval_id);
		//将所有的图片不显示
		for (var i = 0; i < banner_imgs.length; i++) {
			banner_imgs[i].style.opacity = 0;
		}
		//显示当前点击小圆点对应的图片
		banner_imgs[index].style.opacity = 1;
		//还原所有的小圆点的背景
		for (var i = 0; i < circles.length; i++) {
			circles[i].style.backgroundColor = "#b0b0b0";
		}
		//更改小圆点的背景
		circles[index].style.backgroundColor = "#757575";
		//开启定时任务
		interval();
	})
}

//对轮播图片添加监听
// for (var i = 0; i < banner_imgs.length; i++) {
// 	//监听鼠标移入事件
// 	banner_imgs[i].addEventListener('mouseenter',function(){
// 		//停止播放
// 		clearInterval(interval_id);
// 	})
// 	//监听鼠标移出事件
// 	banner_imgs[i].addEventListener('mouseleave',function(){
// 		//开始播放
// 		interval();
// 	})
// }


/*放大镜*/
var banner_box = document.querySelector('.banner-box');
var zoom = document.querySelector('.zoom');
var zoom_big_img = document.querySelector('.zoom-big-img');
var big_img = document.querySelector('.zoom-big-img img');
//鼠标移入事件
banner_box.onmouseover = function(){
	// console.log(123);
	zoom.style.display = 'block';
	zoom_big_img.style.display = 'block';
	//停止轮播
	clearInterval(interval_id);
	//获取当前正在播放的图片
	var imgs = banner_imgs[index].childNodes;
	big_img.src = imgs[0].src;
}
//鼠标移除事件
banner_box.onmouseout = function(){
	zoom.style.display = 'none';
	zoom_big_img.style.display = 'none';
	//开始播放
	interval();
}

//鼠标移动事件
banner_box.onmousemove = function(e){
	//获取鼠标距离文档的距离
	var pageY = e.pageY;
	var pageX = e.pageX;
	//获取轮播图距离文档的距离
	var offsetTop = banner_box.offsetTop;
	var offsetLeft = banner_box.offsetLeft;
	// console.log(pageY,offsetTop);
	
	//获取放大镜高度的一半
	var h = zoom.clientHeight/2;
	var w = zoom.clientWidth/2;
	//计算出放大镜顶部距离轮播图的位置
	var top = pageY - offsetTop - h;
	var left = pageX - offsetLeft - w;
	//垂直方向边界判断
	if(top <= 0){
		top = 0;
	}else if(top >= banner_box.clientHeight - zoom.clientHeight){
		top = banner_box.clientHeight - zoom.clientHeight;
	}
	//水平方向边界判断
	if(left <= 0){
		left = 0;
	}else if(left >= banner_box.clientWidth - zoom.clientWidth){
		left = banner_box.clientWidth - zoom.clientWidth;
	}
	//设置放大镜的位置
	zoom.style.top = top + 'px';
	zoom.style.left = left + 'px';
	
	//放大比例
	var y = top/(banner_box.clientHeight - zoom.clientHeight);
	var yy = y*(800 - 480);
	big_img.style.top = -yy + 'px';
	
	var x = left/(banner_box.clientWidth - zoom.clientWidth);
	var xx = x*(800-480);
	big_img.style.left = -xx + 'px';

}